<%--
  Created by IntelliJ IDEA.
  User: XBB
  Date: 2021/3/8
  Time: 22:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线联系</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap-theme.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>

    <style>
        #message{
            margin-top:40px;
            border:1px solid gray;
            padding:20px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <br>
            <button type="button" class="btn btn-default btn-success" onclick="conectWebSocket()" style="width:150px">进入聊天</button>
            <button type="button" class="btn btn-default btn-warning" onclick="closeWebSocket()" style="width:150px">退出聊天</button>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-8 column">

            <div id="message" style="width:100%;min-height: 500px;font-size:20px;border-radius: 50px;padding-left: 100px">请先点击进入聊天</div>
            <br/>
            <textarea class="form-control" rows="4" id="text"></textarea>
            <%--<input id="text" type="text" />--%>
            <br/>
            <button type="button" class="btn btn-default btn-primary" onclick="send()" style="margin-left: 80%;width:150px">发送消息</button>
        </div>
        <div>
        <div class="col-md-2 column">
        </div>
    </div>
</div>

<%--<button onclick="conectWebSocket()">进入聊天</button>
<button onclick="closeWebSocket()">退出聊天</button>
<hr />
<fieldset>
    <legend>chat</legend>
    <div id="message" style="border-color: white"></div>
</fieldset>
消息：<input id="text" type="text" />
<button onclick="send()">发送</button>--%>
</body>
<script type="text/javascript">
    var websocket = null;
    function conectWebSocket(){
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/house/websocket/"+"${user.userName}");
        } else {
            alert('Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function() {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function(event) {
            setMessageInnerHTML("----------成功建立连接----------");
        }
        //接收到消息的回调方法
        websocket.onmessage = function(event) {
            var i;
            var option;
            var onlineName;
            var received_msg = event.data;
            console.log("数据已接收:" +received_msg);
            var obj = JSON.parse(received_msg);
            console.log("可以解析成json:"+obj.messageType);
            //1代表上线 2代表下线 3代表在线名单 4代表普通消息
            if(obj.messageType==1){
                //把名称放入到selection当中供选择
                onlineName = obj.username;
                option = "<option>"+onlineName+"</option>";
                $("#onLineUser").append(option);
                setMessageInnerHTML(onlineName+"上线了");
            }
            else if(obj.messageType==2){
                $("#onLineUser").empty();
                onlineName = obj.onlineUsers;
                var offlineName = obj.username;
                option = "<option>" + "--所有--" + "</option>";
                for(i = 0; i<onlineName.length; i++){
                    if(!(onlineName[i]==document.getElementById('username').value)){
                        option+="<option>"+onlineName[i]+"</option>"
                    }
                }
                $("#onLineUser").append(option);

                setMessageInnerHTML(offlineName+"下线了");
            }
            else if(obj.messageType==3){
                onlineName = obj.onlineUsers;
                option = null;
                for(i = 0; i<onlineName.length; i++){
                    if(!(onlineName[i]==document.getElementById('username').value)){
                        option+="<option>"+onlineName[i]+"</option>"
                    }
                }
                $("#onLineUser").append(option);
                console.log("获取了在线的名单"+onlineName.toString());
            }
            else{
                /*setMessageInnerHTML(obj.fromusername+"对"+obj.tousername+"说："+obj.textMessage);*/
                setMessageInnerHTML(obj.fromusername+" ："+obj.textMessage);
            }
            /*setMessageInnerHTML(event.data);*/
        }
        //连接关闭的回调方法
        websocket.onclose = function() {
            setMessageInnerHTML("Loc MSG:关闭连接");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() {
            websocket.close();
        }
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML +=  '<br/>'+innerHTML;
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        if(document.getElementById('text').value == ""){
            alert("请输入内容")
            return;
        }else{
            var message = document.getElementById('text').value;
            document.getElementById('text').value="";
            websocket.send(message);
        }
    }
</script>
</html>
